<template>
  <div>
    <van-row>
      <van-col
        span="1"
        offset="18"
        class="icon"
      >
        <router-link to="/setting">
          <van-icon name="setting-o" />
        </router-link>
      </van-col>
      <van-col
        span="1"
        offset="1"
        class="icon"
      >
        <van-icon name="chat-o" />
      </van-col>
      <van-col
        span="1"
        offset="1"
        class="icon add"
      >
        <van-icon name="add" />
      </van-col>
    </van-row>
    <div v-if="this.$store.state.user != ''">
      <div class="touxiang">
        <van-row>
          <van-col span="6">
            <van-image
              width="1.5rem"
              height="1.5rem"
              fit="contain"
              round
              :src="'apis/kuan_api/photo/'+$store.state.user.user_img"
              style="border:1px solid lightgray"
            />
          </van-col>
          <van-col span="12">
            <p><b>{{$store.state.user.user_nickname ?$store.state.user.user_nickname:$store.state.user.user_name}}</b>
              <van-tag
                type="primary"
                round
              ><i>{{$store.state.user.level}}</i></van-tag>
            </p>
            <p>
              <van-progress :percentage="62" />
            </p>
          </van-col>
        </van-row>
      </div>
      <div class="inf">
        <van-grid
          direction="horizontal"
          :column-num="3"
          :border=false
        >
          <van-grid-item :to="{name:'UserDetails', query:{userid:$store.state.user.user_id}}">
            <p class="s_txt"><b>{{this.info.Num?this.info.Num:0}}</b></p>
            <p class="txt">动态</p>
          </van-grid-item>
          <van-grid-item to="/attention">
            <p class="s_txt"><b>{{$store.state.attention.attention_num?$store.state.attention.attention_num:0}}</b></p>
            <p class="txt">关注</p>
          </van-grid-item>
          <van-grid-item to="/fans">
            <p class="s_txt"><b>{{$store.state.fans.fans_num?$store.state.fans.fans_num:0}}</b></p>
            <p class="txt">粉丝</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div v-else>
      <router-link to="/login">
        <van-row>
          <van-col
            span="6"
            :offset="1"
          >
            <van-image
              round
              width="1.5rem"
              height="1.5rem"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
          <van-col
            span="12"
            style="height:67px;line-height:67px"
          >未登录</van-col>
        </van-row>
      </router-link>
    </div>
    <div class="gongneng">
      <van-grid
        :column-num="4"
        :border=false
      >
        <van-grid-item
          icon="like"
          text="我的关注"
          style="color:rgb(1, 188, 212)"
        />
        <van-grid-item
          icon="star"
          text="我的收藏"
          style="color:rgb(33, 150, 243)"
        />
        <van-grid-item
          icon="column"
          text="我的图文"
          style="color:rgb(245, 67, 54)"
        />
        <van-grid-item
          icon="bookmark"
          text="应用集"
          style="color:rgb(33, 150, 243)"
        />
        <van-grid-item
          icon="cash-on-deliver"
          text="钱包中心"
          to="/account"
          style="color:rgb(166, 114, 255)"
        />
        <van-grid-item
          icon="gold-coin-o"
          text="我卖出的"
          to="/seller"
          style="color:rgb(242, 108, 217)"
        />
        <van-grid-item
          icon="shopping-cart-o"
          text="我买到的"
          to="/order"
          style="color:rgb(166, 113, 255)"
        />
        <van-grid-item
          icon="weapp-nav"
          text="更多"
          style="color:rgb(1, 189, 212)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      info: [],
    };
  },
  methods: {
    getmessage() {
      this.axios
        .post("apis/kuan_api/index.php", {
          userid: this.$store.state.user.user_id,
          code: 1,
        })
        .then((res) => {
          if (res.data.errorCode == 1) {
            this.info = res.data;
            console.log(res.data);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取关注列表
    getattention() {
      this.axios
        .post("apis/kuan_api/Attention.php", {
          attention_id: this.$store.state.user.user_id,
          Code: 0,
        })
        .then((res) => {
          console.log(res.data);
          this.$store.state.attention = res.data;
          sessionStorage.setItem(
            "attention",
            JSON.stringify(this.$store.state.attention)
          );
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取粉丝列表
    getfans() {
      this.axios
        .post("apis/kuan_api/Attention.php", {
          attention_id: this.$store.state.user.user_id,
          Code: 1,
        })
        .then((res) => {
          this.$store.state.fans = res.data;
          sessionStorage.setItem(
            "fans",
            JSON.stringify(this.$store.state.fans)
          );
        })
        .catch((err) => {});
    },
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem("user"));
    if (user) {
      this.$store.commit("setuser", user);
    }
    if (user != null) {
      this.getmessage();
      this.getattention();
      this.getfans();
    }
  },
};
</script>

<style scoped>
.icon {
  font-size: 0.5rem;
  padding-top: 15px;
  color: black;
}
.add {
  color: green;
}
img {
  width: 100%;
}
.touxiang {
  width: 90%;
  margin: 0 auto;
}
.s_txt {
  margin: 2px;
  font-size: 18px;
}
.txt {
  margin: 2px;
  color: gray;
}
.inf {
  margin: 0 auto;
}
.gongneng {
  margin-top: 10px;
}
a {
  color: black;
}
</style>